<template>
    <header class="header-container">
        <div class="left">
            <div class="logo">
                <img :src="logo" alt="">
                <h1>大宗交易平台</h1>
            </div>
            <el-input v-model="search" placeholder="Please Input" :suffix-icon="Search" />
        </div>
        <div class="right">
            <el-tooltip class="box-item" effect="dark" content="帮助" placement="top">
                <el-icon>
                    <InfoFilled />
                </el-icon>
            </el-tooltip>

            <el-dropdown>
                <div>
                    <el-badge v-if="hasNotice" :value="count" class="item">
                        <el-icon>
                            <Message />
                        </el-icon>
                    </el-badge>
                    <el-icon v-else>
                        <Message />
                    </el-icon>
                </div>
                <template #dropdown v-if="notice?.company">
                    <el-dropdown-menu>
                        <Notice :company="notice.company" :option="notice.option" :pass="notice.pass"></Notice>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>


            <el-dropdown>
                <div>
                    <el-icon>
                        <Avatar />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{user? user : "undefined"}}</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </header>
</template>

<script lang="ts" setup>
import { Avatar, InfoFilled, ArrowDown, Message, Search } from "@element-plus/icons-vue"
import { ElNotification } from "element-plus";
import { ref } from "vue";
import { useUserStore } from "../../../store/user"
import { useNotice } from "../hooks/useNotice";
import Notice from "./Notice.vue";
import { useLogout } from "../../../hooks/useLogout";
import logo from "@/assets/logo.png";
const search = ref("");
const user = useUserStore().user;
const { notice, count, hasNotice } = useNotice();

const { logout } = useLogout();

</script>

<style lang="less" scoped>
.left {
    margin-left: 2rem;
    width: 800px;
    display: flex;
    align-items: center;

    .logo {
        width: 500px;
        display: flex;
        align-items: center;

        @-webkit-keyframes text-animate {
            from {
                background-position: 0 0
            }

            to {
                background-position: -100% 0
            }
        }


        @keyframes text-animate {
            0% {
                background-position: 0 0
            }

            to {
                background-position: -100% 0
            }
        }


        h1 {
            // background-image: -webkit-linear-gradient(left, #cddc39, #ff9800 25%, #cddc39 50%, #ff9800 75%, #cddc39) !important;
            // -webkit-text-fill-color: transparent !important;
            // -webkit-background-clip: text !important;
            // background-size: 200% 100% !important;
            // -webkit-animation: text-animate 1s cubic-bezier(0, 0, 1, 1) infinite;
            // animation: text-animate 1s cubic-bezier(0, 0, 1, 1) infinite;
        }
    }

    img {
        width: 60px;
        height: 60px;
    }
}


.left /deep/ .el-input__wrapper {
    border-radius: 100px !important;
    width: 300px;

}

.header-container {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
        margin-right: 2rem;
        width: 150px;
        justify-content: space-around;

        .el-icon /deep/ {
            width: 30px;
            height: 30px;

            svg {
                transform: scale(1.5);
            }
        }

    }
}
</style>